<template>
    <div style="background: #fff" class="desktop-wrap">
        <div style="width: 100%; height: 100%; position: relative">
            <div v-clickOutSide="handleHideSelect">
                <a-dropdown :visible="visible" :getPopupContainer="(node) => node.parentNode">
                    <my-icon
                        type="iconxingzhuangjiehe1"
                        class="collaspe-icon hover-active"
                        @click.stop="handleCollaspeTask"
                        @mouseenter="handleShowDropList"
                    />
                    <template #overlay>
                        <DropdownList :system="system" />
                    </template>
                </a-dropdown>
            </div>
            <a-row style="height: 100%">
                <a-col :span="6" v-show="!isCollaspeTask">
                    <TaskList :system="system" :isCollaspeTask="isCollaspeTask" />
                </a-col>
                <a-col :span="isCollaspeTask ? 24 : 18">
                    <flexbox>
                        <flexbox :style="{ width: leftWidth, position: 'relative' }">
                            <RequireList :system="system" :isCollaspeTask="isCollaspeTask" />
                            <div class="moveBtn" v-move="updateWidth" :width="350" />
                        </flexbox>
                        <VersionList :style="{ flex: 1, width: `calc(100% - ${leftWidth})` }" :system="system" :systemInfo="systemInfo" />
                    </flexbox>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
import TaskList from './TaskList/index.vue';
import DropdownList from './TaskList/DropdownList.vue';
import RequireList from './RequireList/index.vue';
import VersionList from './VersionList/index.vue';
import { defineComponent, ref, unref, reactive, computed, toRefs } from 'vue';
export default defineComponent({
    components: {
        TaskList,
        RequireList,
        VersionList,
        DropdownList
    },
    props: {
        system: {
            type: Number,
            default: null
        },
        systemInfo: {
            type: Object,
            default: () => ({})
        }
    },
    setup() {
        const state = reactive<any>({
            isCollaspeTask: false,
            visible: false,
            leftWidth: '55%'
        });
        const comName = computed(() => {
            return state.isCollaspeTask ? 'MenuUnfoldOutlined' : 'MenuFoldOutlined';
        });
        const handleCollaspeTask = () => {
            state.isCollaspeTask = !state.isCollaspeTask;
            state.visible = state.isCollaspeTask;
        };

        const handleHideSelect = () => {
            state.visible = false;
        };
        const handleShowDropList = () => {
            if (state.isCollaspeTask) {
                state.visible = true;
            } else {
                state.visible = false;
            }
        };
        const updateWidth = (val) => {
            state.leftWidth = val;
        };
        return {
            ...toRefs(state),
            comName,
            handleCollaspeTask,
            handleHideSelect,
            handleShowDropList,
            updateWidth
        };
    }
});
</script>
<style lang="less">
.workbench-require-card-item {
    font-size: 13px;
    width: 100%;
    border-radius: 8px;
    padding: 8px 0px;
    border: 1px solid #e9e9e9;
    background: #f5f6f7;
    box-sizing: border-box;
    box-shadow: 0px 2px 11px 0px rgba(4, 120, 211, 0.08);
    margin-bottom: 8px;
    overflow: hidden;
    cursor: move;
    .show-icon {
        display: none;
    }
    .delete-cont {
        &:hover {
            background: rgba(23, 35, 61, 0.05);
        }
    }
    &:hover {
        background: #fff;
        .show-icon {
            display: block;
        }
    }
}
</style>
<style scoped lang="less">
.desktop-wrap {
    height: 100% !important;
    .collaspe-icon {
        cursor: pointer;
        position: absolute;
        left: 16px;
        top: 6px;
        z-index: 1;
        width: 34px;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hover-active {
        &:hover {
            background: rgba(23, 35, 61, 0.05);
            border-radius: 4px;
        }
    }

    // 去除滚动条
    ::-webkit-scrollbar {
        width: 0px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #9093994d;
        border-radius: 2px;
        box-shadow: inset 0 0 6px #0003;
    }
    // 轨道样式
    ::-webkit-scrollbar-track {
        background-color: #0000000d;
    }

    /* 拖动条 */
    .moveBtn {
        height: 100%;
        width: 6px;
        /* opacity: 0; */
        position: absolute;
        right: 0px;
        top: 0;
        cursor: col-resize;
    }
}
</style>